<template>
	<div class="dialog col">
		<div class="dialog-header">Wnds</div>
		<div class="dialog-qrcode" ref='qrcode' v-if="options.qrcode"></div>
		<div class="dialog-content mba" v-if="options.content">
			{{options.content}}
		</div>
		<div class="dialog-filelist col" v-if="options.filelist">
			<div class="dialog-filelist-item"></div>
		</div>
		<div class="dialog-table" v-if="options.inputs">
			<table>
				<tr v-for="item in options.inputs">
					<td style="padding-right: 5px;">
						<label style="font-size: 12px;">{{item.title}}</label>:
					</td>
					<td>
						<input :autofocus="1" :type="item.type" v-model="item.value" />	
					</td>					
				</tr>
			</table>
		</div>		
		<div class="dialog-btnbar ">
			<div style="justify-content: flex-start;" v-if="options.time">
				{{options.time/1000}}秒后关闭
			</div>
			<button v-if="options.ok" @click.stop="options.ok()">确认</button>
			<button v-if="options.cancel" @click.stop="options.cancel()">取消</button>			
		</div>
	</div>
</template>

<script>
	{
		name: 'dialogs',
		props:['options'],		
		created:function(){
			var that = this
			if(this.options.qrcode){			
				Vue.nextTick(function(){
					var qr = new QRCode(that.$refs.qrcode,{
						width : 128,
	            		height : 128
					})
					qr.makeCode(that.options.qrcode)	
				})				
			}	
		}
	}
</script>

<style>
	.dialog{
		position: absolute;
		top: 30%;
		width: auto;
		height: auto;		
		border: solid #D2D7DC;
		border-width: thin;		
		padding: 10px;		
		justify-content: flex-start;
		box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.2);
		z-index: 10000;
		background: #F5F5F5;
	}
	.dialog-header{
		width: 100%;
		height: auto;
		padding: 5px;
		margin: 5px;
		border-bottom: solid #D2D7DC thin;
	}
	.dialog-table{
		margin: 15px;
	}
	.dialog-content{
		width: 100%;
		padding: 20px;		
		font-size: 12px;
	}
	.dialog-btnbar{
		height: auto;
		padding: 5px 5px 5px 5px;		
		border-top: solid #D2D7DC thin;
		justify-content: flex-end;
		align-content: center;
		align-items: center;	
	}
	.dialog-btnbar>button{
		border-radius: 5px;
		margin: 0 0 0 10px;
		width: 80px; /* 宽度 */
		height: 25px; /* 高度 */
		border-width: 0px; /* 边框宽度 */
		border-radius: 3px; /* 边框半径 */
		background: #1E90FF; /* 背景颜色 */
		cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
		outline: none; /* 不显示轮廓线 */
		font-family: Microsoft YaHei; /* 设置字体 */
		color: white; /* 字体颜色 */
		font-size: 10px; /* 字体大小 */
	}
	.dialog-btnbar>button:hover{
		background: #5599FF;
	}
	.dialog-filelist{
		height: 30px;
	}
	.dialog-filelist-item{
		height: auto;
		
	}
	.dialog-qrcode{
		margin-top: 10px;		
	}
</style>